<template>
	<div class="query">
		<div class="check">
			<div class="c_left">条件搜索栏</div>
			<div class="c_right clear">
				<div class="fl">
					<span class="c_tip">搜索关键字</span>
					<input type="text" class="c_input" v-model="srm" placeholder="请输入关键字">
				</div>
				<div class="fl" style="margin-left:10px;">
					<el-button type="primary" class="btn_clear" @click="searchFun">搜索</el-button>
				</div>
			</div>
		</div>
		<div class="list_tip clear">
			<!-- <span class="fl">数据管理列表</span> -->
		</div>
		<div class="table_box">
			<vxe-grid border resizable align="center" :seq-config="{startIndex: (query.page - 1) * query.limit}"
			:header-cell-style="tableHead"
			:cell-style="tableBody"
			:columns="tableColumn" :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="editClosedEvent"></vxe-grid>
			 <pagination
			   :total="query.total"
			   :page.sync="query.page"
			   :limit.sync="query.limit"
			   @pagination="getList"
			 />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				srm: "",
				tableData: [],
				loading: false,
				query: {
					total: 0,
					page: 1,
					limit: 10,
				},
				tableColumn: [{
						type: 'seq',
						width: 60,
						title:"序号"
					},
					{
						field: 'JCXMDM',
						title: '检查项目代码'
					},
					{
						field: 'JCXMMC',
						title: '检查项目名称'
					},
					{
						field: 'JCLX',
						title: '类型(可编辑)',
						editRender:{ name: '$select', options: [{value:"-1",label:"不确定"},{value:"1",label:"X射线"},{value:"2",label:"CT"},{value:"3",label:"磁共振"},{value:"4",label:"其他"}],attrs: {type: 'label'}}
					},
					{
						field: 'MATCHUSER',
						title: '操作人'
					},
					{
						field: 'MATCHTIME',
						title: '操作时间',
						formatter:"formatDate"
					}
				],
				tableData: []
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			tableHead ({row,rowIdx}) {
				return "background:#409efe;color:#fff;font-size:12px;height:36px;padding:0;line-height:36px;text-align:center;border:0;"
			},
			tableBody({row, column, rowIndex, columnIndex}){
				var style = "padding:0;font-size:12px;color:#8b8b8b;border:0;border-right:1px solid #d9f1f3;"
				if(rowIndex%2 != 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:36px;line-height:36px;background:#eaf4fe;"
			
				}
				if(rowIndex%2 == 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:44px;line-height:44px;background:#fff;"
				}
				return style;
			},
			searchFun() {
				 this.query.page = 1;
				this.getList();
			},
			async getList() {
				let res = await this.$custom.dictExamData({
					srm: this.srm,
					page:  this.query.page,
					pageSize:this.query.limit
				})
				// if(res.code == 200){
					for(var i in res.rows){
						res.rows[i].MATCHTIME=parseInt(res.rows[i].MATCHTIME)*1000;
					}
					this.query.total = res.total;
					this.tableData = res.rows;
				// }
			},
			async editClosedEvent ({ row, column }, event) {
			  let res=await this.$custom.dictExamUpdata({id:row.ID,jcxmdm:row.JCXMDM,jcxmmc:row.JCXMMC,jclx:row.JCLX});
			  this.$message({
			  	message:res.msg,
			  	type:res.code == 1 ? "success" : "error",
			  	duration:1500
			  })
			  this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	body {
		background: #e6edf5;
	}

	.query {
		width: 100%;
		height: 100%;
		background: #e6edf5;

		.check {
			font-size: 12px;
			display: flex;
			line-height: 60px;
			background: #fff;
			text-align: center;

			.c_left {
				width: 115px;
				float: left;
			}

			.c_right {
				overflow: hidden;
				color: #636365;
				border-left: 1px solid #e6edf5;

				.c_tip {
					display: inline-block;
					width: 100px;
					padding-right: 10px;
					text-align: right;
				}

				.c_input {
					width: 150px;
					height: 40px;
					border: 1px solid #dcdfe6;
					border-radius: 4px;
					padding-left: 5px;
				}

				.c_input::-webkit-input-placeholder {
					color: #dcdfe6;
				}

				.c_input::-ms-input-placeholder {
					color: #dcdfe6;
				}

				.c_input::-moz-input-placeholder {
					color: #dcdfe6;
				}

				.c_search {
					width: 100px;
				}

				.c_searchbtn {
					display: inline-block;
					width: 42px;
					height: 25px;
					margin-left: 4px;
					background: #28a4f4;
					color: #fff;
					font-size: 12px;
					text-align: center;
					line-height: 26px;
					border-radius: 6px;
					cursor: pointer;
				}

				.c_checkbox {
					width: 230px;
					height: 40px;
					display: inline-block;
					margin-left: -12px;
				}

				.btn_clear {
					padding: 0;
					width: 70px;
					height: 40px;
					line-height: 40px;
				}
			}
		}

		.list_tip {
			font-size: 14px;
			color: #29a4f2;
			padding: 10px 18px;
		}

		.table_box {
			padding: 0 18px;
		}
	}

	.el-checkbox__label {
		padding-left: 5px;
	}

	.el-checkbox {
		margin-right: 10px;
	}

	.el-form-item {
		margin-bottom: 5px;
	}

	.departSearch {
		text-align: left;
		line-height: 50px;

		.fl {
			margin-right: 30px;
		}
	}
</style>
